<template>
  <div class="app-container">
    <div style="background-color: #fff">
      <!-- 查询 -->
      <div class="container-module" style="padding-bottom: 0">
        <el-form :inline="true" class="search-form" size="small">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item class="search-form-item" label="等级名称：">
                <el-input class="input-with-select" v-model="searchForm.name" maxlength="10" show-word-limit
                  onkeyup="value =value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '')" placeholder="请输入等级名称" />
              </el-form-item>

              <el-form-item class="search-form-item" label="启用状态：">
                <el-select clearable v-model="searchForm.is_show" placeholder="请选择启用状态">
                  <el-option v-for="item in stateArr" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="getListWay">查询</el-button>
                <el-button size="small" type="primary" icon="el-icon-refresh" @click="resettingWay">重置</el-button>
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="grouping" style="margin-top: 20px">
      <div class="marginBottom">

        <el-row :gutter="2">
          <el-col>
            <!-- <el-button v-hasPermi="'grade/add'" type="primary" icon="el-icon-circle-plus-outline"
              @click="upgrade_configuration">升级配置</el-button> -->
            <el-button v-hasPermi="'grade/add'" type="primary" icon="el-icon-circle-plus-outline"
              @click="addgradeWay">添加等级</el-button>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }" v-loading="loading" highlight-current-row :data="gradeList" style="width: 100%">
            <el-table-column align="center" prop="id" width="130" label="ID">
            </el-table-column>
            <el-table-column align="center" prop="icon" label="等级Icon">
              <template slot-scope="scope">
                <div style="width: 40px; height: 40px; margin: 0 auto">
                  <el-image v-if="scope.row.icon" :src="scope.row.icon" :preview-src-list="[scope.row.icon]" />
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column
              align="center"
              prop="user_background"
              label="等级背景图"
            >
              <template slot-scope="scope">
                <div style="width: 40px; height: 40px; margin: 0 auto">

                  <el-image
                    v-if="scope.row.user_background"
                    :src="scope.row.user_background"
                    :preview-src-list="[scope.row.user_background]"
                  />
                </div>
              </template>
            </el-table-column> -->
            <el-table-column align="center" prop="experience" label="升级经验">
            </el-table-column>
            <el-table-column align="center" prop="name" label="等级名称">
            </el-table-column>
            <el-table-column align="center" prop="grade" width="130" label="等级级别">
            </el-table-column>
            <!-- <el-table-column align="center" prop="discount" width="130" label="享受折扣">
            </el-table-column> -->

            <el-table-column align="center" prop="is_show" label="启用状态">
              <template slot-scope="scope">
                <span v-if="scope.row.is_show == 1" style="color:#1890ff;">启用</span>
                <span style="color:#ff0000;" v-else>禁用</span>
              </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" width="180" prop="address" label="操作">
              <template slot-scope="scope">
                <el-button v-hasPermi="'grade/qyjy'" v-if="scope.row.is_show == 1" type="text"
                  @click="switchShowWay(scope.row)">
                  禁用
                </el-button>
                <el-button v-hasPermi="'grade/qyjy'" v-else type="text"
                  @click="switchShowWay(scope.row)">
                  启用
                </el-button>
                <el-button v-hasPermi="'grade/del'" style="margin-right: 10px;" type="text"
                  @click="putGrade(scope.row)">
                  编辑
                </el-button>
                <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delGradeWay(scope.row)">
                  <el-button v-hasPermi="'grade/add'" type="text"  slot="reference">
                    删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table></el-col>
      </el-row>
      <el-row class="marginTop" style="text-align: right">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchForm.page" :page-sizes="[10, 20, 30, 40]" :page-size="searchForm.page.count"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>
    </div>
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="用户等级配置" size="60%" :withHeader="false"
      :visible.sync="gradeDialogGrouping" @close="gradeCloseDialogGrouping" :show-close="true">
      <div style="position: relative">
        <div class="drawerTitle">
          <span>用户等级配置</span>
          <div class="close" @click="gradeCloseDialogGrouping">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>

        <div class="informationTitleView" style="background-color: #fff;margin-left: 20px;">
          <el-tabs v-model="activeNames" @tab-click="infotabshandleClick">
            <el-tab-pane label="等级信息" name="等级信息">
            </el-tab-pane>
            <el-tab-pane label="等级权益" name="等级权益">
            </el-tab-pane>
          </el-tabs>
          <!-- <div class="leftBox" style="padding-left: 10px;">
            <div class="leftborder"></div>
            <div class="text">基本信息</div>
          </div> -->
          <div class="right"></div>
        </div>
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 200px)">

        <div v-if="activeNames == '等级信息'">
          <el-form ref="ruleForm" status-icon :rules="rules" :model="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col :span="11">
                <el-form-item label="等级名称" prop="name">
                  <el-input type="text" maxlength="10" clearable show-word-limit placeholder="请输入等级名称"
                    v-model="ruleForm.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="等级级别" prop="grade">
                  <el-input type="text" onkeyup="value=value.replace(/\D/g,'')" placeholder="请输入等级级别" maxlength="5"
                    clearable show-word-limit v-model="ruleForm.grade" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="等级图标" prop="icon">
                  <logo-upload :single-file="iconFile" :show-file-list="false" accept="image/jpeg, image/png"
                    @uploadCallback="logoCallback" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="等级背景" prop="user_background">
                  <logo-upload :single-file="iconBackground" :show-file-list="false" accept="image/jpeg, image/png"
                    @uploadCallback="backgroundCallback" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <!-- <el-col :span="11">
              <el-form-item label="享受折扣" prop="discount">
                <el-input
                  type="text"
                  maxlength="3"
                  clearable
                  show-word-limit
                  onkeyup="value=value.replace(/\D/g,'')"
                  placeholder="请输入享受折扣"
                  v-model="ruleForm.discount"
                  autocomplete="off"
                >
                  <el-button style="margin: 0 auto" slot="append" type="text"
                    >%</el-button
                  ></el-input
                >
              </el-form-item>
            </el-col> -->
              <el-col :span="11">
                <el-form-item label="升级经验" prop="experience">
                  <el-input type="text" maxlength="10" clearable show-word-limit placeholder="请输入升级所需要的经验值"
                    onkeyup="value=value.replace(/\D/g,'')" v-model="ruleForm.experience" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="是否启用" prop="is_show">
                  <el-radio v-model="ruleForm.is_show" :label="1">显示</el-radio>
                  <el-radio v-model="ruleForm.is_show" :label="0">隐藏</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="informationTitleView">
              <div class="leftBox" style="padding-left: 10px;">
                <div class="leftborder"></div>
                <div class="text">消费奖励经验</div>
              </div>
              <div class="right"></div>
            </div>
            <el-row>
              <el-col :span="12">
               <div style="display: flex;">
                 <el-form-item label="现金消费" prop="order_gift_experience">
                   <el-input type="text" v-model="ruleForm.order_gift_experience"
                   placeholder=""  onkeyup="value=value.replace(/\D/g,'')" style="width: 100px;"></el-input>
                 </el-form-item>
                 <span style="margin-left: 8px;">
                 <el-select v-model="cashtype" placeholder="请选择奖励类型">
                   <el-option v-for="item in [
                       { name: '按照固定分值-经验', id: 1 },
                       { name: '按照消费比例-%经验', id: 2 },
                     ]" :key="item.id" :label="item.name" :value="item.id">
                   </el-option>
                 </el-select>
                 </span>
               </div>
              </el-col>
              <el-col :span="12">
                <div style="display: flex;">
                <el-form-item label="积分消费" prop="integral_experience">
                  <el-input type="text" v-model="ruleForm.integral_experience"
                 placeholder=""  onkeyup="value=value.replace(/\D/g,'')" style="width: 100px;"></el-input>
                </el-form-item>
                <span style="margin-left: 8px;">
                  <el-select v-model="integraltype" placeholder="请选择奖励类型">
                    <el-option v-for="item in [
                        { name: '按照固定分值-经验', id: 1 },
                        { name: '按照消费比例-%经验', id: 2 },
                      ]" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </span>
                 </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <div style="display: flex;">
                <el-form-item label="提货券消费" prop="delivery_voucher_experience">
                  <el-input type="text" v-model="ruleForm.delivery_voucher_experience"
                 placeholder="" onkeyup="value=value.replace(/\D/g,'')" style="width: 100px;"></el-input>
                </el-form-item>
                <span style="margin-left: 8px;">
                <el-select v-model="coupon_summarytype" placeholder="请选择奖励类型">
                  <el-option v-for="item in [
                      { name: '按照固定分值-经验', id: 1 },
                      { name: '按照消费比例-%经验', id: 2 },
                    ]" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                </span>
                 </div>
              </el-col>

            </el-row>
            <div class="informationTitleView">
              <div class="leftBox" style="padding-left: 10px;">
                <div class="leftborder"></div>
                <div class="text">动作奖励经验</div>
              </div>
              <div class="right"></div>
            </div>
            <el-row>
              <el-col :span="11">
                <el-form-item label="拉新奖励" prop="invite_gift_experience">
                  <el-input type="text"  v-model="ruleForm.invite_gift_experience"
                  placeholder="请输入拉新奖励经验" onkeyup="value=value.replace(/\D/g,'')" style="width: 250px;"></el-input>

                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div v-else style="padding: 30px;">
          <span style="color: #666;">开发中。。。</span>
        </div>
      </el-scrollbar>
      <div v-if="activeNames == '等级信息'">
        <el-row style="margin: 20px 0">
          <el-col :span="24" style="text-align: right; padding-right: 30px;">
            <el-button @click="gradeCloseDialogGrouping">取消</el-button>
            <el-button :loading="submitLoading" type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </el-col>
        </el-row>
      </div>

    </el-drawer>
    <!--  -->
    <!-- <el-drawer :modal-append-to-body="false" :append-to-body="true" title="会员等级配置" size="50%" :withHeader="false"
      :visible.sync="gradeDialogvip" @close="gradeCloseDialogvip" :show-close="true">
      <div style="position: relative;margin-bottom: 30px;">
        <div class="drawerTitle">
          <span>会员等级配置</span>
          <div class="close" @click="gradeCloseDialogvip">
            <i class="el-icon-close"></i>
          </div>
        </div>
      </div>

      <div v-loading="loadings">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 185px)">
          <el-form :model="ruleForms" status-icon :rules="ruless" ref="ruleForms" label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="是否启用" prop="is_open_level">
              <el-radio v-model="ruleForms.is_open_level" label="1">启用</el-radio>
              <el-radio v-model="ruleForms.is_open_level" label="0">关闭</el-radio>
            </el-form-item>
            <div class="informationTitleView">
              <div class="leftBox" style="padding-left: 10px;">
                <div class="leftborder"></div>
                <div class="text">消费奖励经验</div>
              </div>
              <div class="right"></div>
            </div>
            <el-form-item label="订单赠送经验" prop="order_gift_experience">
              <el-input type="text" onkeyup="value=value.replace(/\D/g,'')" v-model="ruleForms.order_gift_experience"
                autocomplete="off" style="width: 250px;"></el-input>

            </el-form-item>
            <div class="informationTitleView">
              <div class="leftBox" style="padding-left: 10px;">
                <div class="leftborder"></div>
                <div class="text">动作奖励经验</div>
              </div>
              <div class="right"></div>
            </div>
            <el-form-item label="拉新奖励" prop="invite_gift_experience">
              <el-input type="text" onkeyup="value=value.replace(/\D/g,'')" v-model="ruleForms.invite_gift_experience"
                autocomplete="off" style="width: 250px;"></el-input>

            </el-form-item>

          </el-form>
        </el-scrollbar>
        <el-col :span="24" style="text-align: right;padding-right:30px">
          <el-button @click="gradeCloseDialogvip">取消</el-button>
          <el-button :loading="submitLoadings" type="primary" @click="gradeSubmitForm('ruleForms')">保存</el-button>
        </el-col>
      </div>


    </el-drawer> -->
  </div>
</template>

<script>
  import {
    getgradeList,
    addGrade,
    delGrade,
    editGrade,
    getLevelConfig,
    saveLevelConfig
  } from "@/api/user/index";
  import LogoUpload from "@/components/FileUpload";
  export default {
    components: {
      LogoUpload,
    },
    name: "Grouping",
    data() {
      return {
        activeNames:'等级信息',
        submitLoadings: false,
        title: "添加等级",
        ruleForms: {
          is_open_level: "",
          order_gift_experience: "",
          invite_gift_experience: "",
        },
        ruless: {
          is_open_level: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请选择是否启用"));
              }
              callback();
            },
            trigger: "change",
          }, ],
          order_gift_experience: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("订单赠送经验不能为空"));
              }
              callback();
            },
            trigger: "blur",
          }, ],
          invite_gift_experience: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("邀新赠送经验不能为空"));
              }
              callback();
            },
            trigger: "blur",
          }, ],
        },
        loading: false,
        loadings: false,
        // 添加修改弹框控制器
        gradeDialogGrouping: false,
        gradeDialogvip: false,
        // 状态数组
        stateArr: [{
            label: "启用",
            value: 1,
          },
          {
            label: "禁用",
            value: 0,
          },
        ],
        // 会员等级列表
        gradeList: [],
        // 搜索参数
        searchForm: {
          name: "",
          is_show: "",
          page: 1,
          count: 10,
        },
        // 总条数
        total: 0,
        // 提交参数
        ruleForm: {
          name: "",
          grade: "",
          // discount: "",
          experience: "",
          icon: "",
          user_background: "",
          is_show: 1,
          remark: "",
          order_gift_experience: "",
          integral_experience:"",
          delivery_voucher_experience:"",
          invite_gift_experience: "",
          awardJson:{},
        },
        // 会员图标回显
        iconFile: {},
        cashtype:1,
        integraltype:1,
        coupon_summarytype:1,
        // 图标背景
        iconBackground: {},
        submitLoading: false,
        // 校验方法
        rules: {
          experience:[{
            required: true,
            message: "请输入升级经验",
            trigger: "blur"
          }],
          order_gift_experience:[{
            required: true,
            message: "请输入经验值",
            trigger: "blur"
          }],
          integral_experience:[{
            required: true,
            message: "请输入经验值",
            trigger: "blur"
          }],
          delivery_voucher_experience:[{
            required: true,
            message: "请输入经验值",
            trigger: "blur"
          }],
          invite_gift_experience:[{
            required: true,
            message: "请输入拉新经验",
            trigger: "blur"
          }],

          grade:[{
            required: true,
            message: "请输入等级级别",
            trigger: "blur"
          },],
          name: [{
              required: true,
              message: "请输入等级名称",
              trigger: "blur"
            },
            // {
            //   required: true,
            //   message: "请输入类目名称",
            //   validator: (rule, value, callback) => {
            //     let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
            //     if (req.test(value)) {
            //       return callback(new Error("等级名称不能包含特殊字符"));
            //     }
            //     callback();
            //   },
            //   trigger: "blur",
            // },
          ],
          icon: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("等级图标不能为空"));
              }
              callback();
            },
            trigger: "blur",
          }, ],
          // discount: [{
          //   required: false,
          //   validator: (rule, value, callback) => {
          //     if (!value) {
          //       callback();
          //     } else {
          //       if (value > 100) {
          //         return callback(new Error("折扣不能大于100"));
          //       } else {
          //         callback();
          //       }
          //     }
          //   },
          //   trigger: "change",
          // }, ],
          user_background: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("图标背景不能为空"));
              }
              callback();
            },
            trigger: "blur",
          }, ],
        },
      };
    },
    created() {
      this.getListWay();
      this.getLevelConfigWay()
    },
    methods: {
      //切换tab
      infotabshandleClick(){

      },
      getLevelConfigWay() {
        this.loadings = true;
        getLevelConfig()
          .then((res) => {
            this.loadings = false;
            if (res.code !== 200) {
              this.$messages.error(res.msg);
              return;
            }
            console.log(res.data)
            this.ruleForms = res.data;
          })
          .catch(() => {
            this.loadings = false;
          });
      },
      gradeSubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitLoadings = true;
            this.loadings = true;
            saveLevelConfig(this.ruleForms)
              .then((res) => {
                this.submitLoadings = false;
                if (res.code !== 200) {
                  this.$messages.error(res.msg);
                  return;
                }
                this.$messages.success("已保存");

                this.getLevelConfigWay();
                // setTimeout(()=>{
                //   this.gradeDialogvip = false;
                // },1000)
              })
              .catch(() => {
                this.submitLoadings = false;
                this.loadings = false;
              });
          } else {

            console.log("error submit!!");
            return false;
          }
        });
      },
      getListWay() {
        this.loading = true;
        getgradeList(this.searchForm).then((res) => {
          this.loading = false;
          if (res.code !== 200) {
            this.$messages.error(res.msg);
            return;
          }
          this.gradeList = res.data.list;
          this.total = res.data.total;
        });
      },
      // 是否显示发生改变
      switchShowWay(val) {
        this.$confirm('是否改变启用状态?', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          val.is_show = val.is_show == 1 ? 0 : 1;
          this.loading = true;
          editGrade(val).then((res) => {
            this.loading = false;
            if (res.code !== 200 && res.status !== 1) {
              this.$messages.error(res.msg);
              return;
            }
            if (res.code == 200) {
              this.$messages.success("修改成功");
              this.getListWay();
            } else {
              this.$messages.error(res);
            }
          });
        }).catch(() => {

        });

      },
      resettingWay() {
        this.searchForm.name = "";
        this.searchForm.is_show = "";
        this.getListWay();
      },
      // 关闭弹框
      gradeCloseDialogGrouping() {
        this.submitLoading = false;
        this.gradeDialogGrouping = false;
        this.ruleForm = {
          name: "",
          grade: "",
          // discount: "",
          experience: "",
          icon: "",
          user_background: "",
          is_show: 1,
          remark: "",
        };
        this.title = "";
        this.$refs.ruleForm.resetFields();
      },
      gradeCloseDialogvip() {
        this.gradeDialogvip = false;
      },
      upgrade_configuration() {
        this.title = "会员等级配置";
        this.gradeDialogvip = true
      },
      // 打开添加修改弹框
      addgradeWay() {
        this.title = "添加等级";
        this.gradeDialogGrouping = true;
      },
      //编辑
      putGrade(row) {
        this.formData = JSON.parse(JSON.stringify(row));
        // this.ruleForm = JSON.parse(JSON.stringify(row));
        this.ruleForm.id = JSON.parse(JSON.stringify(row)).id
        this.ruleForm.name = JSON.parse(JSON.stringify(row)).name
        this.ruleForm.is_show = JSON.parse(JSON.stringify(row)).is_show
        this.ruleForm.remark = JSON.parse(JSON.stringify(row)).remark
        this.ruleForm.icon = JSON.parse(JSON.stringify(row)).icon
        this.ruleForm.user_background = JSON.parse(JSON.stringify(row)).user_background
        this.ruleForm.experience = row.experience
        this.ruleForm.grade = row.grade
        this.ruleForm.order_gift_experience = row.cash.value
        this.ruleForm.integral_experience = row.integral.value
        this.ruleForm.delivery_voucher_experience = row.coupon_summary.value
        this.ruleForm.invite_gift_experience = row.pullValue

        this.cashtype = row.cash.type
        this.integraltype = row.integral.type
        this.coupon_summarytype = row.coupon_summary.type

        this.iconFile = {
          url: row.icon,
        };
        this.iconBackground = {
          url: row.user_background,
        };
        this.title = "修改等级";
        this.gradeDialogGrouping = true;
        this.$forceUpdate();
      },
      // 提交
      submitForm(formName) {
        console.log(this.ruleForm);

        this.$refs[formName].validate((valid) => {
          if (valid) {
            let consumeAward = {
              consumeAward:{
                cash: {
                  value:this.ruleForm.order_gift_experience,
                  type:this.cashtype
                },
                integral: {
                  value:this.ruleForm.integral_experience,
                  type:this.integraltype
                },
                coupon_summary: {
                  value:this.ruleForm.delivery_voucher_experience,
                  type:this.coupon_summarytype
                },
              },
              motionAward: {
                pullValue:this.ruleForm.invite_gift_experience
              }
            }
            this.ruleForm.awardJson = JSON.stringify(consumeAward)
            this.submitLoading = true;
            if (!this.ruleForm.id) {
              addGrade(this.ruleForm).then((res) => {
                this.submitLoading = false;
                if (res.code !== 200 && res.status !== 1) {
                  this.$messages.error(res.msg);
                  return;
                }
                if (res.code == 200) {
                  this.$messages.success("添加成功");
                  this.gradeDialogGrouping = false;
                  this.getListWay();
                }
              });
            } else {
              var obj = {};

              for (var key in this.ruleForm) {
                if (this.formData[key] !== this.ruleForm[key]) {
                  if (
                    this.ruleForm[key].constructor !== Object &&
                    this.ruleForm[key].constructor !== Array
                  ) {
                    obj[key] = this.ruleForm[key];
                  }
                }
              }

              obj.id = this.ruleForm.id;
              editGrade(obj).then((res) => {
                this.submitLoading = false;
                if (res.code !== 200 && res.status !== 1) {
                  this.$messages.error(res.msg);
                  return;
                }
                if (res.code == 200) {
                  this.$messages.success("修改成功");
                  this.gradeDialogGrouping = false;
                  this.getListWay();
                }
              });
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      // 删除
      delGradeWay(row) {
        delGrade({
          id: row.id
        }).then((res) => {
          if (res.code == 200) {
            this.$messages.success("删除成功");
            this.getListWay();
          } else {
            this.$messages.error(res.msg);
          }
        });
      },
      handleSizeChange(val) {
        this.searchForm.count = val;
        this.getListWay();
      },
      handleCurrentChange(val) {
        this.searchForm.page = val;
        this.getListWay();
      },
      logoCallback(singleFile) {
        this.iconFile = singleFile;
        this.ruleForm.icon = singleFile.url;
      },
      backgroundCallback(singleFile) {
        this.iconBackground = singleFile;
        this.ruleForm.user_background = singleFile.url;
      },
    },
  };
</script>

<style lang="scss">
  img {
    width: 100%;
    height: 100%;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
  }

  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }
</style>
